<template>
    <AoeSplitPanel>
        <AoeSplitPanelItem>
            <AoeCard class="tree-panel">
                <AoeTree v-bind="$attrs" v-model:data="modelValue" class="tree-edit">
                    <template
                        #title="{
                            label,
                            fnUp,
                            fnDown,
                            fnInsert,
                            fnRemove,
                            isTail,
                            isFirst,
                            node,
                            fnUpdate,
                            selected,
                        }"
                    >
                        <div
                            @click="edit(node as T, fnUpdate as (node: T) => void)"
                            class="tree-title"
                        >
                            <span class="tree-text">{{ label ?? '[title]' }}</span>
                            <AoeButtonGroup class="button-group" v-if="selected">
                                <AoeButton @click.stop="fnInsert" size="sm" theme="primary">
                                    <AddOneIcon />
                                </AoeButton>
                                <AoeButton @click.stop="fnRemove" size="sm" theme="danger">
                                    <DeleteIcon />
                                </AoeButton>
                                <AoeButton
                                    @click.stop="fnUp"
                                    v-if="!isFirst"
                                    size="sm"
                                    theme="success"
                                >
                                    <UpIcon />
                                </AoeButton>
                                <AoeButton
                                    @click.stop="fnDown"
                                    v-if="!isTail"
                                    size="sm"
                                    theme="success"
                                >
                                    <DownIcon />
                                </AoeButton>
                            </AoeButtonGroup>
                        </div>
                    </template>
                </AoeTree>
            </AoeCard>
        </AoeSplitPanelItem>
        <AoeSplitPanelItem>
            <AoeCard :title="title" class="form-panel">
                <AoeSchemaForm :elements="fields" v-model="values">
                    <AoeFormItem>
                        <AoeButton @click="onsubmit">提交</AoeButton>
                        <AoeButton @click="clear">放弃</AoeButton>
                    </AoeFormItem>
                </AoeSchemaForm>
            </AoeCard>
        </AoeSplitPanelItem>
    </AoeSplitPanel>
</template>

<script setup lang="ts" generic="T extends Aoe = Aoe">
import { AoeTree, create_tree_node } from 'tree-ui-aoe';
import { AoeSchemaForm } from 'form-ui-aoe';
import { type FieldSchema, type TreeNodeSchema } from 'aoe';
import type { Aoe, IValues } from 'aoe';
import {
    AoeButtonGroup,
    AoeButton,
    AddOneIcon,
    DeleteIcon,
    UpIcon,
    DownIcon,
    AoeSplitPanel,
    AoeSplitPanelItem,
    AoeFormItem,
    AoeCard,
    arr_push_ref,
} from 'ui-aoe';
import { shallowRef, ref } from 'vue';

// defineProps<{
//     fields: FieldSchema[];
// }>();
// const modelValue = defineModel<TreeNodeSchema<T>[]>();

const modelValue = ref<TreeNodeSchema<T>[]>([
    {
        id: 'Home',
        label: 'Home',
    },
    {
        id: 'Article',
        label: '文章',
        children: [
            {
                id: '开发区',
                label: 'A-1',
                children: [
                    {
                        id: 'A-1-1',
                        label: 'A-1-1',
                    },
                    {
                        id: 'A-1-2',
                        label: 'A-1-2',
                    },
                ],
            },
            {
                id: 'A-2',
                label: '尧都区',
                open: true,
            },
        ],
    },
    {
        id: 'B',
        label: '论坛',
        url: false,
    },
] as TreeNodeSchema<T>[]);
const fields = shallowRef([
    {
        id: 'label',
        name: 'label',
        widget: 'input',
    },
    {
        id: 'open',
        name: 'open',
        widget: 'switch',
    },
] as FieldSchema[]);

const fnAddRoot = () => arr_push_ref(modelValue, create_tree_node(values.value as T) as IValues);

const values = shallowRef<undefined | IValues>(undefined);
const update = shallowRef<undefined | ((node: T) => void)>(undefined);
const title = ref<string | undefined>(undefined);
const clear = () => {
    update.value = fnAddRoot;
    values.value = undefined;
    title.value = '添加根节点';
};
const edit = (node: T, fnUpdate: (node: T) => void) => {
    if (node?.id && node.id !== values.value?.id) {
        update.value = fnUpdate;
        values.value = node as IValues;
        title.value = node.id;
    }
};
const onsubmit = () => update.value?.(values.value as T);

clear();

defineOptions({
    inheritAttrs: false,
});
</script>

<style scoped>
:deep() {
    /*noinspection CssUnusedSymbol*/
    .tree-node-title-wrapper {
        height: 56px;
    }
}
.button-group {
    display: inline-block;
    margin-left: 20px;

    /*noinspection CssUnusedSymbol*/
    .btn {
        margin-bottom: 0;
    }
}
.tree-title {
    display: flex;
    align-items: center;
    height: 42px;
}

.tree-panel {
    height: 100%;
}

.form-panel {
    margin: 30px 10px;
}
</style>
